<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>todo-list</title>
	</head>
	<body>
		<div id="app">
			<form v-on:submit.prevent="addNewTodo">
				<label for="new-todo">Add a todo</label>
				<input v-model="newTodoText" id="new-todo" placeholder="E.g. Feed the cat">
			</form>
			<ul>
				<li is="todo-item"
					v-for="(todo,index) in todos"
					v-bind:key = "todo.id"
					v-bind:title = "todo.title"
					v-on:remove="todos.splice(index,1)"
				></li>
			</ul>
		</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script>
		Vue.component('todo-item', {
			template: '\
    <li>\
      {{ title }}\
      <button v-on:click="$emit(\'remove\')">Remove</button>\
    </li>\
	',
			props: ['title']
		})

		var vm = new Vue({
			el: '#app',
			data: {
				newTodoText: '',
				todos: [{
						id: 1,
						title: 'Do the dishes',
					},
					{
						id: 2,
						title: 'Take out the trash',
					},
					{
						id: 3,
						title: 'Mow the lawn'
					}
				],
				nextTodoId:4,
			},
			methods:{
				addNewTodo:function(){
					this.todos.push({
						id:this.nextTodoId ++,
						title:this.newTodoText,
					});
					this.newTodoText = '';
				}
			}

		})
	</script>
</html>